<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-tabs v-model="activeName">
          <el-tab-pane label="编程题" name="program"></el-tab-pane>
          <el-tab-pane label="其他" name="1"></el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <el-row>
          <el-col :span="4">
            <el-select v-model="selectDifficulty" placeholder="请选择难度">
              <el-option
                  v-for="item in DifficultyOptions"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="selectUserQueStatus" placeholder="请选择状态">
              <el-option
                  v-for="item in UserQUeStatusOptions"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-pagination
            background
            layout="prev, pager, next"
            :total="pagination.total"
            :page-size="pagination.pageSize"
            :current-page="pagination.pageNum"

            @current-change="pageChange">
        </el-pagination>

        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="relation"
              label="状态"
              width="180"
          >
            <template slot-scope="{row}">
              <span :class="relationFontClass(row)">{{ row.relation }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="题目"
              width="180"
              :formatter="formatterName"
          ></el-table-column>
          <el-table-column
              prop="difficulty"
              label="难度"
              width="180"
              :formatter="formatterDifficulty"
          >
          </el-table-column>
          <el-table-column
              prop="passRate"
              label="通过率"
              width="180"
              :formatter="formatterPassRate"
          >
          </el-table-column>
          <el-table-column
              label="操作"
              width="130">
            <template slot-scope="{row}">
              <el-button type="primary" size="small" @click="jump(row)">挑战</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>


</template>

<script>

import {getUserQuestionProgramRelation, listQueProgram} from "@/api/question";

export default {
  name: "Home",
  data() {
    return {
      activeName: 'program',
      selectDifficulty: '',
      DifficultyOptions: [
        {id: null, desc: '全部'},
        {id: 1, desc: '简单'},
        {id: 2, desc: '中等'},
        {id: 3, desc: '困难'},
      ],
      selectUserQueStatus: '',
      UserQUeStatusOptions: [
        {id: null, desc: '全部'},
        {id: 1, desc: '未开始'},
        {id: 2, desc: '尝试过'},
        {id: 3, desc: '已解答'},
      ],
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      userQuestionProgramRelation: null

    };
  },
  created() {
  },
  mounted() {

    this.initFetch()
  },
  watch: {
    selectDifficulty: {
      handler(newVal, oldVal) {
        this.queryData()
      }
    },
    selectUserQueStatus: {
      handler(newVal, oldVal) {
        this.queryData()
      }
    },
  },
  methods: {
    async initFetch() {
      await this.getUserQuestionRelation()
      // await this.queryData()
    },
    relationFontClass(row) {
      if (row.relation == '尝试过') {
        return 'relationAttempt'
      } else if (row.relation === '已解答') {
        return 'relationSolved'
      } else {
        return 'notStart'
      }
    },
    getUserQuestionRelation() {
      getUserQuestionProgramRelation().then(res => {
        this.userQuestionProgramRelation = res.data
        this.queryData();
      })
    },
    queryData() {

      listQueProgram(this.pagination.pageNum,
          this.pagination.pageSize,
          this.selectDifficulty,
          this.selectUserQueStatus
      ).then(res => {
        this.pagination.total = res.data.total
        this.tableData = res.data.data

        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].relation = this.computeUserQuestionRelation(this.tableData[i])
        }

      })


    },
    pageChange(currentPage) {
      this.pagination.pageNum = currentPage
      this.queryData()
    },
    formatterName(row) {
      return row.id + '.' + row.name
    },
    formatterPassRate(row) {
      let rate = 0;
      if (row.totalPass === 0) {
        rate = 0;
      } else {
        rate = (row.totalPass / row.totalAttempt).toFixed(2);
      }
      return rate * 100 + '%'
    },
    formatterDifficulty(row) {
      let difficulty = row.difficulty;
      for (let i = 0; i < this.DifficultyOptions.length; i++) {
        if (difficulty === this.DifficultyOptions[i].id) {
          if (this.DifficultyOptions[i].desc === '全部') {
            return '简单';
          }
          return this.DifficultyOptions[i].desc
        }
      }
      return '简单';
    },
    computeUserQuestionRelation(row) {

      let map = this.userQuestionProgramRelation;
      let attemptArray = map['2']
      let solvedArray = map['3']
      for (let i = 0; i < attemptArray.length; i++) {
        if (attemptArray[i] === row.id) {
          return '尝试过';
        }
      }
      for (let i = 0; i < solvedArray.length; i++) {
        if (solvedArray[i] === row.id) {
          return '已解决';
        }
      }
      return '未开始';

    },
    jump(row) {
      // this.$store.state.selectQuestionProgramId = row.id
      localStorage.setItem('selectQuestionProgramId',row.id)
      this.$router.push('/program-detail')
    }
  },
};
</script>
<style scoped>
.relationAttempt {
  color: #ffef54;
}

.relationSolved {
  color: #0fc50f;
}

.notStart {
  color: #4de2ff;
}
</style>`